<template>
    <div class="flex flex-col items-center justify-center h-screen bg-gray-100 relative">
        <!-- 大感叹号图标 -->
        <div class="text-9xl text-red-500 absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2">💔</div>
        <div class="bg-white p-8 rounded-lg shadow-md relative z-10">
            <h1 class="text-4xl font-bold text-gray-800 mb-4">404 - 页面神秘失踪啦！</h1>
            <p class="text-gray-700 mb-6">您好像迷路了，该页面玩起了捉迷藏，怎么也找不到。请检查一下链接，说不定它就会乖乖出现啦！</p>
            <router-link to="/" class="text-blue-500 hover:underline">返回首页</router-link>
        </div>
    </div>
</template>

<script setup>
// 确保已导入必要的组件
import { RouterLink } from 'vue-router'
</script>

<style>
/* Tailwind未生效，可以添加这些基础样式 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.h-screen { height: 100vh; }
.bg-gray-100 { background-color: #f3f4f6; }
.p-8 { padding: 2rem; }
.bg-white { background-color: white; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.text-4xl { font-size: 2.25rem; }
.font-bold { font-weight: 700; }
.text-gray-800 { color: #1f2937; }
.mb-4 { margin-bottom: 1rem; }
.text-gray-700 { color: #374151; }
.mb-6 { margin-bottom: 1.5rem; }
.text-blue-500 { color: #3b82f6; }
.text-red-500 { color: #ef4444; }
.hover\:underline:hover { text-decoration: underline; }
.absolute { position: absolute; }
.relative { position: relative; }
.z-10 { z-index: 10; }
.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)); }
</style>